<template>
    <div v-if="value">
        <div class="screen-modal-marke">

        </div>
        <Transition name="fade" enter-class="fade-enter-from">
            <div class="screen-modal" :style="{ width: width + 'px', height: height + 'px' }">
                <div class="screen-modal_header">
                    <span>{{ title }}</span>
                    <button @click="$emit('input', false)" class="btn-close"></button>
                </div>
                <div class="screen-modal_content">
                    <slot></slot>
                </div>
                <div class="screen-modal_footer"></div>
            </div>
        </Transition>
    </div>
</template>

<script>
export default {
    name: 'ScreenModal',
    props: {
        value: {
            type: Boolean,
            required: true,
            default: false
        },
        title: {
            type: String,
            default: '弹出窗口标题'
        },
        width: {
            type: Number,
            default: 1029
        },
        height: {
            type: Number,
            default: 770
        },
    },
}
</script>

<style lang="less" scoped>
.screen-modal-marke {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 1986;
    background: rgba(0, 0, 0, .7);
}
.screen-modal {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 1987;
    display: flex;
    flex-direction: column;
}

.screen-modal_header {
    height: 46px;
    background: url(./images/t-c.png) repeat-x 0 0;
    position: relative;
    margin: 0 100px;
    text-align: center;

    &::before,
    &::after {
        content: '';
        display: block;
        width: 100px;
        height: 100%;
        position: absolute;
        top: 0;
    }

    &::before {
        left: -100px;
        background: url(./images/t-l.png) no-repeat 0 0;
    }

    &::after {
        right: -100px;
        background: url(./images/t-r.png) no-repeat 0 0;
    }

    span {
        font-size: 20px;
        font-family: "微软雅黑";
        color: #FEFFFF;
        font-weight: bold;
        margin-top: 30px;
        z-index: 2;
        display: block;
        position: relative;

        &:after {
            content: '';
            display: block;
            width: 36px;
            height: 4px;
            background: #219EFF;
            position: absolute;
            left: 50%;
            margin-left: -18px;
            bottom: -10px;
        }
    }
}

.screen-modal_content {
    background: url(./images/m-m.png) repeat 0 0;
    position: relative;
    margin: 0 30px;
    flex: 1;

    &::before,
    &::after {
        content: '';
        display: block;
        width: 30px;
        height: 100%;
        position: absolute;
        top: 0;
    }

    &::before {
        left: -30px;
        background: url(./images/m-l.png) repeat-y 0 0;
    }

    &::after {
        right: -30px;
        background: url(./images/m-r.png) repeat-y 0 0;
    }
}


.screen-modal_footer {
    background: url(./images/b-c.png) repeat 0 0;
    position: relative;
    margin: 0 100px;
    height: 46px;

    &::before,
    &::after {
        content: '';
        display: block;
        width: 100px;
        height: 100%;
        position: absolute;
        top: 0;
    }

    &::before {
        left: -100px;
        background: url(./images/b-l.png) no-repeat 0 0;
    }

    &::after {
        right: -100px;
        background: url(./images/b-r.png) no-repeat 0 0;
    }
}

.btn-close {
    background: url(./images/btn-close.png) no-repeat 0 0;
    width: 32px;
    height: 32px;
    outline: none;
    border: 0;
    position: absolute;
    right: -60px;
    top: 30px;
    z-index: 2;
}


.fade-enter-from {
    opacity: 0;
    transform: scale(.4);
}

.fade-enter-to {
    transform: scale(1);
    opacity: 1;
}

.fade-enter-active,
.fade-leave-active {
    transition: all .4s ease-out;
}

.fade-leave-from {
    transform: scale(1);
    opacity: 1;
}

.fade-leave-to {
    transform: scale(.8);
    opacity: 0;
}
</style>